<template>
  <view class="news-detail">
    <!-- 文章头部 -->
    <view class="article-header">
      <text class="title">{{ news.title }}</text>
      <view class="meta">
        <text class="tag" v-if="news.tag">{{ news.tag }}</text>
        <text class="time">{{ news.time }}</text>
        <text class="views">{{ news.views }}阅读</text>
      </view>
    </view>
    
    <!-- 文章内容 -->
    <view class="article-content">
      <!-- 封面图 -->
      <image 
        v-if="news.image"
        :src="news.image" 
        mode="widthFix" 
        class="cover-image"
      />
      
      <!-- 正文 -->
      <rich-text :nodes="news.content"></rich-text>
      
      <!-- 图片列表 -->
      <view 
        class="image-list"
        v-if="news.images?.length"
      >
        <image 
          v-for="(image, index) in news.images"
          :key="index"
          :src="image"
          mode="widthFix"
          @tap="previewImage(index)"
        />
      </view>
    </view>
    
    <!-- 相关资讯 -->
    <view class="related-section">
      <view class="section-title">相关资讯</view>
      <view class="related-list">
        <view 
          class="related-item"
          v-for="(item, index) in news.related"
          :key="index"
          @tap="viewNews(item)"
        >
          <image :src="item.image" mode="aspectFill" class="image" />
          <view class="content">
            <text class="title">{{ item.title }}</text>
            <view class="meta">
              <text class="tag" v-if="item.tag">{{ item.tag }}</text>
              <text class="time">{{ item.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部工具栏 -->
    <view class="bottom-bar">
      <button 
        class="share-btn"
        open-type="share"
      >
        <text class="iconfont icon-share"></text>
        分享
      </button>
      <button 
        class="action-btn"
        :class="{ active: news.liked }"
        @tap="toggleLike"
      >
        <text class="iconfont icon-like"></text>
        {{ news.liked ? '已点赞' : '点赞' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 资讯详情
const news = ref({
  id: 1,
  title: '澳门镜湖医院引进最新达芬奇手术机器人，提升微创手术水平',
  tag: '医院动态',
  time: '2024-03-25 10:30',
  views: 1580,
  image: '/static/news/news1.jpg',
  content: `
    <p style="text-indent: 2em; margin-bottom: 1em;">近日，澳门镜湖医院正式引进第四代达芬奇手术机器人系统，这标志着医院在微创手术领域迈入新的里程碑。</p>
    <p style="text-indent: 2em; margin-bottom: 1em;">达芬奇手术机器人系统是目前全球最先进的微创手术平台之一，具有三维高清视觉系统、灵活的机械臂和精准的操作系统等优势。</p>
    <p style="text-indent: 2em; margin-bottom: 1em;">医院外科主任表示，引进达芬奇手术机器人后，将进一步提升医院在泌尿外科、胸外科、妇科等领域的微创手术水平，为患者提供更精准、更安全的手术治疗方案。</p>
  `,
  images: [
    '/static/news/robot1.jpg',
    '/static/news/robot2.jpg',
    '/static/news/robot3.jpg'
  ],
  liked: false,
  related: [
    {
      id: 2,
      title: '春季养生指南：中医专家教你调理身体',
      image: '/static/news/news2.jpg',
      tag: '健康科普',
      time: '2024-03-24'
    },
    {
      id: 3,
      title: '医院举办"世界睡眠日"主题义诊活动',
      image: '/static/news/news3.jpg',
      tag: '活动资讯',
      time: '2024-03-23'
    }
  ]
})

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: news.value.images,
    current: index
  })
}

// 点赞
const toggleLike = () => {
  news.value.liked = !news.value.liked
  uni.showToast({
    title: news.value.liked ? '点赞成功' : '已取消点赞',
    icon: 'none'
  })
}

// 查看相关资讯
const viewNews = (item) => {
  uni.navigateTo({
    url: `/pages/news/detail?id=${item.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { id } = page.$page?.options || {}
  
  // 这里根据ID加载资讯详情
  console.log('加载资讯详情:', id)
})
</script>

<style lang="scss">
.news-detail {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 120rpx;
  
  .article-header {
    padding: 30rpx;
    
    .title {
      font-size: 40rpx;
      color: $text-primary;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .meta {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: $text-secondary;
      
      .tag {
        color: $primary-color;
        background: $primary-light;
        padding: 4rpx 12rpx;
        border-radius: $radius-sm;
        margin-right: 16rpx;
      }
      
      .time {
        margin-right: 16rpx;
      }
    }
  }
  
  .article-content {
    padding: 0 30rpx;
    
    .cover-image {
      width: 100%;
      border-radius: $radius-lg;
      margin-bottom: 30rpx;
    }
    
    rich-text {
      font-size: 30rpx;
      color: $text-primary;
      line-height: 1.8;
    }
    
    .image-list {
      margin-top: 30rpx;
      
      image {
        width: 100%;
        border-radius: $radius-lg;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .related-section {
    margin-top: 40rpx;
    padding: 30rpx;
    background: $bg-color;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .related-list {
      .related-item {
        display: flex;
        background: #fff;
        border-radius: $radius-lg;
        padding: 20rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .image {
          width: 200rpx;
          height: 140rpx;
          border-radius: $radius-lg;
          margin-right: 20rpx;
          flex-shrink: 0;
        }
        
        .content {
          flex: 1;
          
          .title {
            font-size: 28rpx;
            color: $text-primary;
            line-height: 1.4;
            margin-bottom: 12rpx;
            display: block;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          
          .meta {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: $text-secondary;
            
            .tag {
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              margin-right: 16rpx;
            }
          }
        }
        
        &:active {
          transform: scale(0.99);
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    button {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      .iconfont {
        font-size: 36rpx;
        margin-right: 8rpx;
      }
    }
    
    .share-btn {
      color: $text-regular;
      background: $bg-color;
    }
    
    .action-btn {
      color: $text-regular;
      background: $bg-color;
      
      &.active {
        color: #fff;
        background: $primary-gradient;
      }
    }
  }
}
</style> 